import { Table, Popconfirm, Button } from 'antd';
// import TableRowSelection from 'antd/lib/table';
import { RentDetail, ModelReturn } from '@/data-type';
// import {PrivilegeUser} from '@/api-type';
// import { FormattedMessage } from 'umi'
import { useState } from 'react';
import { useHistory } from 'react-router';
import { FormatterTime, getIdFromHistory, needbackButton } from '@/utils/kits';
// import { render } from '@umijs/deps/compiled/mustache';
import React from 'react';
// import ReactDOM from 'react-dom';
import { ColumnsType } from 'antd/lib/table'
import UpdateDrawer from './common/UpdateDrawer';
import BackButton from './common/BackButton';
import AddRecord from './common/AddRecord';


const ShowRentDetail: React.FC<{ model: ModelReturn<RentDetail> }> = (params) => {
  let rentDetails = params.model.dataSource;
  const onUpdate = params.model.updateOne;
  const onDelete = params.model.deleteById;
  const [showDetail, setShowDetail] = useState(false);
  const [addDrawer, setAddDrawer] = useState(false);
  const [currentRow, setCurrentRow] = useState<RentDetail>();
  //用于路由跳转
  const history = useHistory();
  let formRef = React.createRef<any>();
  function openUpdate(element: RentDetail) {
    setCurrentRow(element);
    setShowDetail(true);
    formRef.current.setFieldsValue(element);
  }
  const onCloseDrawer = () => {
    setShowDetail(false);
  }
  const closeAddDrawer = () => {
    setAddDrawer(false);
  }
  function openAddDrawer() {
    // setCurrentRow(material);
    setAddDrawer(true);
  }
  // const onCloseDrawer1 = () => {
  //   setShowDrawer(false);
  // }
  const tableColumns: ColumnsType<RentDetail> = [
    {
      title: 'ID',
      fixed: false,
      dataIndex: 'id',
    },
    {
      title: '总金额',
      fixed: false,
      dataIndex: 'amount',
    },
    {
      title: '项目详情ID',
      fixed: false,
      dataIndex: 'programDetailId',
    },
    {
      title: '单价',
      fixed: false,
      dataIndex: 'unitPrice',
    },
    {
      title: '天数',
      fixed: false,
      dataIndex: 'days',
    },
    {
      title: '已付金额',
      fixed: false,
      dataIndex: 'paid',
    },
    {
      title: '未付金额',
      fixed: false,
      dataIndex: 'unpaid',
    },
    {
      title: '支付状态',
      fixed: false,
      dataIndex: 'payStatus',
    },
    {
      title: '开始时间',
      dataIndex: 'startDate',
      fixed: false,
      render: FormatterTime,
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      fixed: false,
      render: FormatterTime
    },
  ];
  const columns: ColumnsType<RentDetail> = [
    ...tableColumns,
    {
      title: '操作',
      fixed: 'right',
      width: '15%',
      render: (program: RentDetail) => {
        return (
          <div>
            <Popconfirm title="是否删除?" onConfirm={() => onDelete(program.id)} >
              <Button>删除</Button>
            </Popconfirm>
            <Button onClick={() => openUpdate(program)}>更新</Button>
            {/* <Button onClick={() => openDrawer(program)}>暂未启用</Button> */}
          </div >
        );
      },
    },
  ]
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: RentDetail[]) => {
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: RentDetail) => ({
      disabled: record.id === 1, // Column configuration not to be checked
      name: record.programDetailId.toString(),
    }),
  };
  return (
    <div>
      <Button onClick={() => openAddDrawer()}>新增</Button>
      <BackButton show={needbackButton(history.location.state)} history={history}></BackButton>
      <Table rowSelection={rowSelection}
        dataSource={rentDetails}
        columns={columns}
        rowKey={'id'}
        scroll={{ x: 1500 }}
        onRow={(record) => {
          return {
            onDoubleClick: event => {
              history.push("/page/rent-cost", {
                "id": record.id
              });
            }
          }
        }} />
      <UpdateDrawer onClose={onCloseDrawer}
        elem={currentRow as RentDetail}
        visible={showDetail}
        formRef={formRef}
        updateOne={onUpdate}
        datas={tableColumns}>
      </UpdateDrawer>
      <AddRecord onClose={closeAddDrawer}
        visible={addDrawer}
        save={params.model.saveOne}
        datas={tableColumns}
      ></AddRecord>
    </div>
  );
};

export default ShowRentDetail;